<!-- // Copyright (c) [Year] [name of copyright holder]
// [Software Name] is licensed under Mulan PSL v2.
// You can use this software according to the terms and conditions of the Mulan PSL v2. 
// You may obtain a copy of Mulan PSL v2 at:
//          http://license.coscl.org.cn/MulanPSL2 
// THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.  
// See the Mulan PSL v2 for more details.   -->
<!DOCTYPE HTML>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';script-src; unsafe-inline unsafe-hashes script-src-elem style-src;"> -->
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/popup.css" />
    <script type="text/javascript" src="js/vue.js"></script>

    <style>
        .btnBox {
            min-width: 200px;
            width: 200px;
        }
    </style>
</head>

<body>
    <div id="app">
        {{editType}}
        <div class="container" ref="bddy">
            <div class="btnBox" ref="a12">
                <button tabIndex="-1" class="btn btn-primary btn-xs" @click='addRule'>添加规则</button>
                <a href="options.html" target="_blank" tabIndex="-1" class="btn btn-primary btn-xs">管理规则</a>
                <a href="https://github.com/hanan198501/ReRes" target="_blank" tabIndex="-1" class="btn btn-primary btn-xs">Github</a>
                <a href="http://cssha.com/reres" target="_blank" tabIndex="-1" class="btn btn-primary btn-xs">使用帮助</a>
            </div>

            <div v-if="editDisplay == 'block'" class="editBox">
                <button type="button" class="close" aria-hidden="true" @click='hideEditBox'>&times;</button>
                <div class="errorMsg">{{inputError || "提示信息"}}</div>
                <div class="form-group">
                    <label for="req">If URL match:</label>
                    <input type="text" class="form-control" id="req" v-model="curRule.req" />
                </div>
                <div class="form-group">
                    <label for="res">Response:</label>
                    <input type="text" class="form-control" id="res" v-model="curRule.res" />
                </div>
                <div class="form-group">
                    <label for="res">Group:</label>
                    <input type="text" class="form-control" id="group" v-model="curRule.group" />
                </div>
                <!--<div class="form-group">
        <label for="type">Type:</label>
        <select ng-model="curRule.type" class="form-control" id="type">
            <option value="file">URL映射</option>
            <option value="dir">目录映射</option>
        </select>
    </div>-->
                <button class="btn-block btn btn-primary" @click="saveRule">保存</button>
            </div>
            <div v-for='(group,types) in rules' :key='group'>
                <!-- {{group }} 1{{JSON.stringify(types)}} -->
                <h5 style="text-align: center;font-weight: bold;">{{ group != "" ? group:'未命名'}}</h5>
                <!-- {{rules[group][0].res}} -->
                <table class="table table-hover">
                    <!-- <div class="s" v-for='ele,idx in rules[group]' :key='idx'>
                        {{ele.res}} {{ele.req}}
                    </div> -->
                    <tr v-for='(idx1,rule1) in rules[group]' :key='idx1'>
                        {{idx1}}
                        <td>
                            <label :title="'Responese: 'rule1.req"><input type="checkbox" v-model="rule1.checked"  /> {{rule1.req}}</label>
                            <button @click='edit(idx1,rule1)' type="button" class="btn btn-primary btn-xs edit">编辑</button>
                            <button @click='copy(rule1)' type="button" class="btn btn-primary btn-xs copy">复制</button>
                            <button @click='removeUrl(rule1)' type="button" class="btn btn-default btn-xs remove">删除</button>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="js/popup.js"></script>
</body>

</html>